<template>
  <el-select v-bind="$attrs" :multiple="multiple" v-model="values">
    <el-option v-for="(item, index) in list" :key="index" :label="item[labelKey]" :value="item[valueKey]"> </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'SelectGroupValues',
  props: {
    selectValue: {
      type: String,
      default: ''
    },
    selectLabel: {
      type: String,
      default: ''
    },
    valueKey: {
      type: String,
      default: 'value'
    },
    labelKey: {
      type: String,
      default: 'label'
    },
    list: {
      type: Array,
      default: () => []
    },
    // 如果设置多选 value 值需为字符串类型
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    values: {
      get() {
        if (!this.multiple) return this.selectValue
        return this.selectValue ? this.selectValue.split(',') : []
      },
      set(v) {
        this.$emit('update:selectValue', Array.isArray(v) ? v.toString() : v)
        const ids = this.multiple ? v : [v]
        const labels = ids.map((e) => {
          const cur = this.list.find((x) => x[this.valueKey] == e)
          return cur ? cur[this.labelKey] : ''
        })
        this.$emit('update:selectLabel', labels.toString())
      }
    }
  },
  created() {},
  methods: {}
}
</script>

<style lang="less" scoped></style>
